import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
import { NavLink, useNavigate } from  'react-router-dom'

export default (props) => {
  const [count, setCount] = useState(1);
  const [num, setNum] = useState(2);
	const h1 = useRef()
  const navigate = useNavigate()

	const fn = useCallback(() => {
		console.log('count 发生改变了！！！')
	}, [count])


  const douCount = useMemo(() => {
		return count * 2
	}, [count])




  useEffect(() => {
		console.log(count)
		console.log(h1)
		return () => {
			// 组件销毁的时候执行
		}
  }, [count]);

  return (
    <div>
      <NavLink to="/">去类组件</NavLink>
      <button onClick={ () => navigate('/') }>去类组件</button>
      <h1 ref={ h1 }>{props.message}</h1>
			<h2>{ count }</h2>
      <h3>{ douCount }</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setNum(num + 1)}>+1</button>
    </div>
  );
};
